Design tokens
Tokens for your designs
Import design tokens
Choose format
Choose theme
Copy import statement
import "@siteimprove/fancylib/design-tokens/variables.css;"Colors
Neutrals
var(--color--white) | #ffffff |
var(--color--black) | #000000 |
var(--color--gray--dark) | #4D4D50 |
var(--color--gray--darker) | #202124 |
var(--color--gray--darkest) | #18191B |
Gray
var(--color--gray--100) | #FFFFFF |
var(--color--gray--200) | #FAF9F8 |
var(--color--gray--300) | #F7F5F4 |
var(--color--gray--400) | #F6F4F2 |
var(--color--gray--500) | #F0ECE9 |
var(--color--gray--600) | #D9D6D4 |
var(--color--gray--700) | #A5A3A2 |
var(--color--gray--800) | #757372 |
var(--color--gray--900) | #484746 |
var(--color--gray--1000) | #000000 |
Blue
var(--color--blue--100) | #E9F1FD |
var(--color--blue--200) | #D2E2FB |
var(--color--blue--300) | #BCD4FA |
var(--color--blue--400) | #79A9F4 |
var(--color--blue--500) | #4D8CF1 |
var(--color--blue--600) | #206FED |
var(--color--blue--700) | #1A59BE |
var(--color--blue--800) | #13438E |
var(--color--blue--900) | #0D2C5F |
var(--color--blue--1000) | #06162F |
Teal
var(--color--teal--100) | #E6FCFC |
var(--color--teal--200) | #D2F9F9 |
var(--color--teal--300) | #BCF5F5 |
var(--color--teal--400) | #8FEFEF |
var(--color--teal--500) | #63E9E9 |
var(--color--teal--600) | #42D7D7 |
var(--color--teal--700) | #24A8A8 |
var(--color--teal--800) | #228787 |
var(--color--teal--900) | #175A5A |
var(--color--teal--1000) | #033535 |
Green
var(--color--green--100) | #E7F6F0 |
var(--color--green--200) | #CEEEE0 |
var(--color--green--300) | #9DDDC1 |
var(--color--green--400) | #6CCBA2 |
var(--color--green--500) | #3BBA83 |
var(--color--green--600) | #0AA964 |
var(--color--green--700) | #088750 |
var(--color--green--800) | #06653C |
var(--color--green--900) | #044428 |
var(--color--green--1000) | #03331E |
Yellow
var(--color--yellow--100) | #FFF8E5 |
var(--color--yellow--200) | #FFEFC2 |
var(--color--yellow--300) | #FFE499 |
var(--color--yellow--400) | #FFD666 |
var(--color--yellow--500) | #FFC21C |
var(--color--yellow--600) | #B2801A |
var(--color--yellow--700) | #866013 |
var(--color--yellow--800) | #523D14 |
var(--color--yellow--900) | #3D2E0F |
var(--color--yellow--1000) | #291F0A |
Red
var(--color--red--100) | #FFEBEE |
var(--color--red--200) | #FED8DE |
var(--color--red--300) | #FEC4CD |
var(--color--red--400) | #FE9DAC |
var(--color--red--500) | #FD6279 |
var(--color--red--600) | #FC3B58 |
var(--color--red--700) | #CA2F46 |
var(--color--red--800) | #972335 |
var(--color--red--900) | #651823 |
var(--color--red--1000) | #4C121A |
Pink
var(--color--pink--100) | #FFE5F2 |
var(--color--pink--200) | #FDB4D9 |
var(--color--pink--300) | #F986BF |
var(--color--pink--400) | #ED5EA6 |
var(--color--pink--500) | #E51A80 |
var(--color--pink--600) | #B81466 |
var(--color--pink--700) | #86134D |
var(--color--pink--800) | #691640 |
var(--color--pink--900) | #4F1733 |
var(--color--pink--1000) | #391326 |
Orange
var(--color--orange--100) | #FEF0E6 |
var(--color--orange--200) | #fce2cc |
var(--color--orange--300) | #fbd3b3 |
var(--color--orange--400) | #f6a766 |
var(--color--orange--500) | #f38933 |
var(--color--orange--600) | #F06C00 |
var(--color--orange--700) | #C05600 |
var(--color--orange--800) | #904100 |
var(--color--orange--900) | #602B00 |
var(--color--orange--1000) | #301600 |
Purple
var(--color--purple--100) | #F0EDFF |
var(--color--purple--200) | #D4CCFF |
var(--color--purple--300) | #C1B4FD |
var(--color--purple--400) | #9B89F5 |
var(--color--purple--500) | #765EED |
var(--color--purple--600) | #5B42D7 |
var(--color--purple--700) | #4128BD |
var(--color--purple--800) | #36248F |
var(--color--purple--900) | #261A66 |
var(--color--purple--1000) | #170F3E |
Plum
var(--color--plum--100) | #F5E6F2 |
var(--color--plum--200) | #E2B3D8 |
var(--color--plum--300) | #CF80BF |
var(--color--plum--400) | #BB4DA5 |
var(--color--plum--500) | #A81A8B |
var(--color--plum--600) | #9E007E |
var(--color--plum--700) | #8E0071 |
var(--color--plum--800) | #7E0065 |
var(--color--plum--900) | #6F0058 |
var(--color--plum--1000) | #4F003F |
Legacy mapping
var(--color--gray--lightest) | |
var(--color--gray--lighter) | |
var(--color--gray--light) | |
var(--color--gray) | |
var(--color--blue--lightest) | |
var(--color--blue--lighter) | |
var(--color--blue--light) | |
var(--color--blue) | |
var(--color--blue--dark) | |
var(--color--blue--darker) | |
var(--color--blue--darkest) | |
var(--color--teal--lightest) | |
var(--color--teal--lighter) | |
var(--color--teal--light) | |
var(--color--teal) | |
var(--color--teal--dark) | |
var(--color--teal--darker) | |
var(--color--teal--darkest) | |
var(--color--green--lightest) | |
var(--color--green--lighter) | |
var(--color--green--light) | |
var(--color--green) | |
var(--color--green--dark) | |
var(--color--green--darker) | |
var(--color--green--darkest) | |
var(--color--yellow--lightest) | |
var(--color--yellow--lighter) | |
var(--color--yellow--light) | |
var(--color--yellow) | |
var(--color--yellow--dark) | |
var(--color--yellow--darker) | |
var(--color--yellow--darkest) | |
var(--color--red--lightest) | |
var(--color--red--lighter) | |
var(--color--red--light) | |
var(--color--red) | |
var(--color--red--dark) | |
var(--color--red--darker) | |
var(--color--red--darkest) | |
var(--color--orange--lightest) | |
var(--color--orange--lighter) | |
var(--color--orange--light) | |
var(--color--orange) | |
var(--color--orange--dark) | |
var(--color--orange--darker) | |
var(--color--orange--darkest) | |
var(--color--purple--lightest) | |
var(--color--purple--lighter) | |
var(--color--purple--light) | |
var(--color--purple) | |
var(--color--purple--dark) | |
var(--color--purple--darker) | |
var(--color--purple--darkest) | |
var(--color--pink--lightest) | |
var(--color--pink--lighter) | |
var(--color--pink--light) | |
var(--color--pink) | |
var(--color--pink--dark) | |
var(--color--pink--darker) | |
var(--color--pink--darkest) | |
var(--color--button--cta--secondary--not--active) | |
var(--color--button--cta--secondary--active) | |
var(--color--button--secondary--not--active) | |
var(--color--button--secondary--not--active--hover--border) | |
var(--color--button--secondary--active) |
Background colors
var(--color--background--main--page) | |
var(--color--background--interactive--default) | |
var(--color--background--interactive--hover) | |
var(--color--background--interactive--active) | |
var(--color--background--interactive--active--checked) | |
var(--color--background--interactive--selected) | |
var(--color--background--interactive--disabled) | |
var(--color--background--static--primary) | |
var(--color--background--static--secondary) | |
var(--color--background--static--tertiary) | |
var(--color--background--destructive) | |
var(--color--border--interactive--active--checked) |
Border colors
var(--color--border--separator) | |
var(--color--border--interactive--default) | |
var(--color--border--interactive--error) | |
var(--color--border--interactive--hover) | |
var(--color--border--interactive--active) | |
var(--color--border--interactive--selected) | |
var(--color--border--interactive--disabled) |
Text colors
var(--color--link--foreground) | |
var(--color--link--hover--foreground) | |
var(--color--link--active--foreground) | |
var(--color--link--visited--foreground) | |
var(--color--typography--tone--subtle) | |
var(--color--typography--tone--positive) | |
var(--color--typography--tone--negative) | |
var(--color--typography--tone--warning) | |
var(--color--text--interactive--dark--default) | |
var(--color--text--interactive--light--default) | |
var(--color--text--interactive--disabled) | |
var(--color--text--static--header) | |
var(--color--text--static--body) | |
var(--color--text--highlight--light--foreground) | |
var(--color--text--highlight--light--background) | color-mix(in srgb, var(--color--plum--600) 40%, transparent) |
var(--color--text--highlight--dark--foreground) | |
var(--color--text--highlight--dark--background) | transparent |
Navigation colors
var(--color--navigation--top--background) | |
var(--color--navigation--background) | |
var(--color--navigation--foreground) | |
var(--color--navigation--hover) | |
var(--color--navigation--focus) | |
var(--color--navigation--active) | |
var(--color--navigation--active--foreground) | |
var(--color--navigation--active--border) | |
var(--color--navigation--divider) | |
var(--color--navigation--border) | 0.094rem solid var(--color--gray--600) |
Search Navigation colors
var(--color--search-navigation--text--default) | |
var(--color--search-navigation--text--secondary) | |
var(--color--search-navigation--background--default) | |
var(--color--search-navigation--background--hover) | |
var(--color--search-navigation--shadow--hover) | |
var(--color--search-navigation--hover--outline) | |
var(--color--search-navigation--focus--outline) | |
var(--color--search-navigation--active--outline) | |
var(--color--search-navigation--results-section--border) | |
var(--color--search-navigation--results-item--hover) | |
var(--color--search-navigation--results-item--active) |
Button color
var(--color--button--disabled--foreground) | |
var(--color--button--default--foreground) | |
var(--color--button--default--background) | |
var(--color--button--default--border) | |
var(--color--button--default--hover--background) | #F7F5F4 |
var(--color--button--default--hover--border) | |
var(--color--button--default--hover--shadow) | var(--size--shadow--hover) var(--color--gray--500) |
var(--color--button--default--focus--shadow) | var(--size--shadow--focus--inner) var(--color--gray--100), var(--size--shadow--focus--outer) var(--color--gray--900) |
var(--color--button--default--active--background) | |
var(--color--button--default--active--border) | |
var(--color--button--default--active--foreground) | |
var(--color--button--primary--foreground) | |
var(--color--button--primary--background) | |
var(--color--button--primary--border) | |
var(--color--button--primary--hover--border) | |
var(--color--button--primary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--plum--600) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--primary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--plum--600) |
var(--color--button--primary--active--background) | |
var(--color--button--primary--active--border) | |
var(--color--button--primary--active--foreground) | |
var(--color--button--secondary--foreground) | |
var(--color--button--secondary--background) | |
var(--color--button--secondary--border) | |
var(--color--button--secondary--hover--border) | |
var(--color--button--secondary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--plum--600) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--secondary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--plum--600) |
var(--color--button--secondary--active--background) | |
var(--color--button--secondary--active--border) | |
var(--color--button--secondary--active--foreground) | |
var(--color--button--destructive--foreground) | |
var(--color--button--destructive--background) | |
var(--color--button--destructive--border) | |
var(--color--button--destructive--hover--border) | |
var(--color--button--destructive--hover--shadow) | |
var(--color--button--destructive--focus--shadow) | var(--size--shadow--focus--inner) var(--color--gray--100), var(--size--shadow--focus--outer) var(--color--red--700) |
var(--color--button--destructive--active--background) | |
var(--color--button--destructive--active--border) | |
var(--color--button--destructive--active--foreground) | |
var(--color--button--borderless--foreground) | |
var(--color--button--borderless--background) | transparent |
var(--color--button--borderless--border) | transparent |
var(--color--button--borderless--hover--background) | |
var(--color--button--borderless--hover--border) | |
var(--color--button--borderless--hover--shadow) | |
var(--color--button--borderless--focus--shadow) | |
var(--color--button--borderless--active--background) | transparent |
var(--color--button--borderless--active--border) | |
var(--color--button--borderless--active--foreground) | |
var(--color--button--cta--default--foreground) | |
var(--color--button--cta--default--background) | |
var(--color--button--cta--default--border) | |
var(--color--button--cta--default--hover--background) | |
var(--color--button--cta--default--hover--border) | |
var(--color--button--cta--default--hover--shadow) | var(--size--shadow--hover) var(--color--gray--500) |
var(--color--button--cta--default--focus--shadow) | var(--size--shadow--focus--inner) var(--color--gray--100), var(--size--shadow--focus--outer) var(--color--gray--900) |
var(--color--button--cta--default--active--background) | |
var(--color--button--cta--default--active--border) | |
var(--color--button--cta--default--active--foreground) | |
var(--color--button--cta--primary--foreground) | |
var(--color--button--cta--primary--background) | |
var(--color--button--cta--primary--border) | |
var(--color--button--cta--primary--hover--border) | |
var(--color--button--cta--primary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--plum--600) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--cta--primary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--plum--600) |
var(--color--button--cta--primary--active--background) | |
var(--color--button--cta--primary--active--border) | |
var(--color--button--cta--primary--active--foreground) | |
var(--color--button--cta--secondary--foreground) | |
var(--color--button--cta--secondary--background) | |
var(--color--button--cta--secondary--border) | |
var(--color--button--cta--secondary--hover--border) | |
var(--color--button--cta--secondary--hover--shadow) | var(--size--shadow--hover) color-mix(in srgb, var(--color--plum--600) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--color--button--cta--secondary--focus--shadow) | var(--size--shadow--focus--inner) var(--color--white), var(--size--shadow--focus--outer) var(--color--plum--600) |
var(--color--button--cta--secondary--active--background) | |
var(--color--button--cta--secondary--active--border) | |
var(--color--button--cta--secondary--active--foreground) |
Toast color
var(--color--toast--background--warning) | |
var(--color--toast--color--warning) | |
var(--color--toast--foreground--warning) |
Card color
var(--color--card--border) | 0.0625rem solid var(--color--border--separator) |
Status
var(--color--status--positive--darker) | |
var(--color--status--positive--dark) | |
var(--color--status--positive) | |
var(--color--status--positive--light) | |
var(--color--status--positive--lighter) | |
var(--color--status--positive--lightest) | |
var(--color--status--positive--light--foreground) | |
var(--color--status--warning--background) | |
var(--color--status--warning--highlight--lighter) | |
var(--color--status--warning--highlight--light) | |
var(--color--status--warning--highlight) | |
var(--color--status--warning--lightest) | |
var(--color--status--warning--lighter) | |
var(--color--status--warning--light) | |
var(--color--status--warning) | |
var(--color--status--warning--dark) | |
var(--color--status--warning--dark--foreground) | |
var(--color--status--warning--neutral) | |
var(--color--status--warning--light--foreground) | |
var(--color--status--negative--dark) | |
var(--color--status--negative--light) | |
var(--color--status--negative--light--foreground) | |
var(--color--status--negative--darker) | |
var(--color--status--negative--lightest) | |
var(--color--status--negative--lighter) | |
var(--color--status--negative) | |
var(--color--status--subtle--dark) | |
var(--color--status--subtle--light) | |
var(--color--status--subtle--light--foreground) | |
var(--color--status--neutral--dark) | |
var(--color--status--neutral--light) | |
var(--color--status--neutral--light--foreground) | |
var(--color--status--highlight1--dark) | |
var(--color--status--highlight1--light) | |
var(--color--status--highlight1--light--foreground) | |
var(--color--status--highlight2--dark) | |
var(--color--status--highlight2--light) | |
var(--color--status--highlight3--dark) | |
var(--color--status--highlight3--light) | |
var(--color--status--highlight3--light--foreground) | |
var(--color--status--brand--dark) | |
var(--color--status--brand--light) |
Chart: default
var(--color--chart--1) | |
var(--color--chart--2) | |
var(--color--chart--3) | |
var(--color--chart--4) | |
var(--color--chart--5) | |
var(--color--chart--6) | |
var(--color--chart--7) | |
var(--color--chart--8) |
Heatrange: cool
var(--color--heat--cool--1) | |
var(--color--heat--cool--2) | |
var(--color--heat--cool--3) | |
var(--color--heat--cool--4) | |
var(--color--heat--cool--5) | |
var(--color--heat--cool--6) | |
var(--color--heat--cool--7) | |
var(--color--heat--cool--8) | |
var(--color--heat--cool--9) | |
var(--color--heat--cool--10) |
Scales: warm
var(--color--scale--warm--1) | |
var(--color--scale--warm--2) | |
var(--color--scale--warm--3) | |
var(--color--scale--warm--4) |
Heatrange: warm
var(--color--heat--warm--1) | #3EC67B |
var(--color--heat--warm--2) | #42D688 |
var(--color--heat--warm--3) | #68D985 |
var(--color--heat--warm--4) | #8EDC82 |
var(--color--heat--warm--5) | #B3DF80 |
var(--color--heat--warm--6) | #D9E27D |
var(--color--heat--warm--7) | #FFE57A |
var(--color--heat--warm--8) | #FFC76D |
var(--color--heat--warm--9) | #FFAA61 |
var(--color--heat--warm--10) | #FF8C54 |
var(--color--heat--warm--11) | #FF6D5B |
var(--color--heat--warm--12) |
Scales: cool
var(--color--scale--cool--1) | |
var(--color--scale--cool--2) | |
var(--color--scale--cool--3) | |
var(--color--scale--cool--4) |
Typography
Font-family
var(--font-family--default) | 'IBM Plex Sans', arial, sans-serif |
var(--font-family--alternative) | 'IBM Plex Sans', arial, sans-serif |
var(--font-family--code) | 'IBM Plex Mono', courier, sans-serif |
var(--font-family--heading) | 'IBM Plex Sans', arial, sans-serif |
var(--font-family--display) | 'IBM Plex Sans', arial, sans-serif |
Font-size
var(--font-size--xx-small) | 0.625rem (10px) |
var(--font-size--x-small) | 0.75rem (12px) |
var(--font-size--small) | 0.875rem (14px) |
var(--font-size--medium) | 1rem (16px) |
var(--font-size--large) | 1.125rem (18px) |
var(--font-size--x-large) | 1.375rem (22px) |
var(--font-size--xx-large) | 1.6875rem (27px) |
var(--font-size--xxx-large) | 2rem (32px) |
var(--font-size--interactive--default) | var(--font-size--small) |
Font-weight
var(--font-weight--normal) | 400 |
var(--font-weight--medium) | 500 |
var(--font-weight--bold) | 700 |
var(--font-weight--interactive--default) | var(--font-weight--normal) |
var(--font-weight--interactive--selected) | var(--font-weight--medium) |
Line-height
var(--line-height--reset) | 1 |
var(--line-height--x-small) | 1.1 |
var(--line-height--small) | 1.3 |
var(--line-height--medium) | 1.4 |
var(--line-height--large) | 1.5 |
var(--line-height--x-large) | 1.6 |
Size
var(--size--button--small) | 1.375rem (22px) |
var(--size--button--default) | 2rem (32px) |
var(--size--button--large) | 2.5rem (40px) |
var(--size--icon--small) | 0.75rem (12px) |
var(--size--icon--medium) | 1rem (16px) |
var(--size--icon--default) | 1.25rem (20px) |
var(--size--icon--responsive) | 1.25em |
var(--size--illustration--small) | 6rem (96px) |
var(--size--illustration--medium) | 8rem (128px) |
var(--size--illustration--default) | 12rem (192px) |
var(--size--pill--small) | 1.25rem (20px) |
var(--size--pill--default) | 1.375rem (22px) |
var(--size--pill--large) | 1.5rem (24px) |
var(--size--shadow--focus--inner) | 0 0 0 0.125rem (2px) |
var(--size--shadow--focus--outer) | 0 0 0 0.25rem (4px) |
var(--size--shadow--hover) | 0 0 0 0.1875rem (3px) |
Space
var(--space--xx-small) | 0.25rem (4px) |
var(--space--x-small) | 0.5rem (8px) |
var(--space--small) | 0.75rem (12px) |
var(--space--medium) | 1rem (16px) |
var(--space--large) | 1.25rem (20px) |
var(--space--x-large) | 1.5rem (24px) |
var(--space--xx-large) | 2rem (32px) |
var(--space--xxx-large) | 2.5rem (40px) |
Border radius
var(--border-radius--small) | 0.1875rem (3px) |
var(--border-radius--medium) | 0.3125rem (5px) |
var(--border-radius--rounded) | 125rem (2000px) |
Opacity
var(--opacity--shadow--hover) | 0.2 |
Box shadow
var(--shadow--layer--low) | 0 0.0625rem 0.125rem 0 color-mix(in srgb, var(--color--gray--700) 20%, transparent) |
var(--shadow--layer--medium) | 0 0.25rem 0.5rem 0 color-mix(in srgb, var(--color--gray--700) 12%, transparent), 0 0.125rem 0.25rem 0 color-mix(in srgb, var(--color--gray--700) 8%, transparent) |
var(--shadow--layer--high) | 0 0.5rem 0.75rem 0 color-mix(in srgb, var(--color--gray--700) 16%, transparent), 0 0.25rem 0.375rem 0 color-mix(in srgb, var(--color--gray--700) 4%, transparent) |
var(--shadow--focus--base) | var(--size--shadow--focus--inner) var(--color--white) |
var(--shadow--focus--default) | var(--shadow--focus--base), var(--size--shadow--focus--outer) var(--color--plum--600) |
var(--shadow--focus--inner) | inset var(--size--shadow--focus--inner) var(--color--plum--600) |
var(--shadow--focus--inner--neutral) | inset var(--size--shadow--focus--inner) var(--color--gray--900) |
var(--shadow--hover--default) | var(--size--shadow--hover) color-mix(in srgb, var(--color--plum--600) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--shadow--hover--error) | var(--size--shadow--hover) color-mix(in srgb, var(--color--red--500) calc(var(--opacity--shadow--hover) * 100%), transparent) |
var(--shadow--hover--left) | inset 0.1875rem 0 0 0 var(--color--gray--600) |
var(--shadow--selected) | inset 0.1875rem 0 var(--color--plum--600), inset 0 0.0625rem var(--color--plum--600), inset -0.0625rem 0 var(--color--plum--600), inset 0 -0.0625rem var(--color--plum--600) |
var(--shadow--selected--bottom) | inset 0 -0.1875rem 0 0 var(--color--plum--600) |
var(--shadow--selected--left) | inset 0.1875rem 0 var(--color--plum--600) |
var(--shadow--hover--bottom) | inset 0 -0.125rem 0 rgba(60, 72, 94, 0.15) |
Layout
var(--layout--small) | 36rem (576px) |
var(--layout--medium) | 48rem (768px) |
var(--layout--large) | 62rem (992px) |
var(--layout--x-large) | 75rem (1200px) |
var(--layout--xx-large) | 100rem (1600px) |
Animation
var(--animation--fast) | 0.1s |
var(--animation--medium) | 0.2s |
var(--animation--slow) | 0.3s |